<template>
  <div style="margin: 30px">

    <AzureDynamicTable
      @sort-change="sortChange"
      :columnDesObjs="columnDesObjs"
      :data="tableData">
      <template slot="tableHead">
        <el-input style="margin-right: 10px"/>
        <el-button>修改</el-button>
      </template>

      <template slot="operator" slot-scope="scope">
        <el-button>修改...</el-button>
        <el-button>删除___</el-button>
      </template>
    </AzureDynamicTable>

  </div>

</template>

<script>
  import AzureDynamicTable from '@/components/mDynamicTable/AzureDynamicTable'
  import AButton from '@/components/timeSinkRelate/button/AButton'

  export default {
    name: 'TestAzure',
    components: { AButton, AzureDynamicTable },
    data() {
      return {
        tableData: [],
        columnDesObjs: [
          { key: 'name', label: '名字', isDefaultShowDynamicColumn: false,width:300,sortable:'custom' },
          { key: 'apple', label: '苹果', isDefaultShowDynamicColumn: false ,width:300},
          { key: 'banana', label: '香蕉', isDefaultShowDynamicColumn: false,width:300 },
          { key: 'orange', label: '橙子' },
          { key:"operator",label:"_操作"},
        ],
        operatorObjs: [
          { text: '删除', handleOperator: (row, idx) => void console.log(`删除`, row, idx) },
          { text: '更新', handleOperator: (row, idx) => void console.log(`更新`, row, idx) }
        ]
      }
    },
    created() {
      this.getData()
    },
    methods: {
      sortChange({ column, prop, order }){

        // console.log('---------------------');
        // console.log( column, prop, order);
      },
      handleSelectionChange(val) {
        console.log(val)
        this.multipleSelection = val
      },
      getData() {
        import('./mockTableData').then(({ tableData }) => {
          this.tableData = tableData
        })
      }
    }
  }
</script>

<style lang="scss" scoped>

</style>
